<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: Tween Group</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
		 http://code.createjs.com -->

<script id="editable">
	var canvas, stage, group;

	function init() {
		canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		var w = canvas.width;

		group = new createjs.TweenGroup();

		// create shapes:
		var redBall = getBall("red", 0.1, 0.3);
		var blueBall = getBall("blue", 0.1, 0.5);
		var greenBall = getBall("green", 0.1, 0.7);

		// create tweens and add them to the group:
		group.get(redBall, {loop: -1, bounce:true}).to({x: w*0.9}, 1000);
		group.get(blueBall, {loop: -1, bounce:true}).to({x: w*0.9}, 1500);
		group.get(greenBall, {loop: -1, bounce:true}).to({x: w*0.9}, 2000);

		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", stage);
	}

	function getBall(color, x, y) {
		var ball = new createjs.Shape();
		ball.graphics.beginFill(color).drawCircle(0, 0, canvas.height*0.1);
		ball.x = canvas.width*x;
		ball.y = canvas.height*y;
		stage.addChild(ball);
		return ball;
	}
	
	function setTimeScale(val) {
		group.timeScale = val;
		timeScaleFld.innerText = val.toFixed(1);
	}

	function togglePaused() {
		console.log(group.paused);
		group.paused = !group.paused;
		pausedFld.innerText = group.paused;
	}

</script>
</head>
<body onload="init();">

<div>
	<header class="TweenJS">
		<h1>TweenGroup</h1>

		<p>
			<code>group.timeScale = <b id="timeScaleFld">1.0</b></code> <input type="range" id="timeScale" min="10" max="200" value="100" oninput="setTimeScale(this.value/100)"><br>
			<code>group.paused = <b id="pausedFld">false</b></code> <input type="button" id="paused" value="toggle" onclick="togglePaused()">
		</p>
	</header>

	<canvas id="testCanvas" width="960" height="400"></canvas>
	
</div>

</body>
</html>
